// 引入 vue,相当于之前html页面中的script src=''
import Vue from "vue";

// 引入的当前需要被渲染的组件
import App from "./App.vue";
import "vant/lib/index.css";
import router from "./router";

router.afterEach((to, from, next) => {
  window.scrollTo(0, 0); //切换路由之后滚动条始终在最顶部
})

// 按需引入 vant
import {
  Tabbar,
  TabbarItem,
  Icon,
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  Card,
  Button,
  SwipeCell,
  Switch,
  Stepper,
  SubmitBar,
  Divider,
  Lazyload,
  Cell,
  Col,
  Row,
  Field,
  List,
  Tab, Tabs,
  PullRefresh,
  ImagePreview,
  Checkbox,
  CheckboxGroup,
} from "vant";

Vue
  .use(Tabbar)
  .use(CheckboxGroup)
  .use(ImagePreview)
  .use(PullRefresh)
  .use(TabbarItem)
  .use(Tab)
  .use(Tabs)
  .use(Icon)
  .use(Swipe)
  .use(SwipeItem)
  .use(Grid)
  .use(GridItem)
  .use(Card)
  .use(Button)
  .use(SwipeCell)
  .use(Switch)
  .use(Stepper)
  .use(SubmitBar)
  .use(Divider)
  .use(Cell)

  .use(Lazyload, {
    lazyComponent: true,
  })
  .use(Col)
  .use(Field)
  .use(Row)
  .use(List)
  .use(Checkbox);

// 说明当前的环境为开发环境
// 开发阶段：development
// 产品阶段:production
Vue.config.productionTip = false;

// Vue实例,用于实现组件的渲染
new Vue({
  router,

  // render函数,它有一个参数h,h是真正的实现渲染功能的函数
  // 下面这句代码的意思是渲染App组件并将渲染的结果返回
  render: (h) => {
    return h(App);
  },
}).$mount("#app"); // $mount是挂载渲染好的组件内容到指定的元素 #app是index.html中的模板结构
